<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <p>省份名字</p>
        <input type="text" class="input1">
    </div>
    <div>
        <p>城市名字</p>
        <input type="text" class="input2">
    </div>
    <button class="btn">查询</button>
    <ol>
        <li></li>
    </ol>
    <script src="../axios/axios.min.js"></script>
    <script>
        document.querySelector('.btn').addEventListener('click', function () {
            //获取表单中的数据
            const username = document.querySelector('.input1').value
            const password = document.querySelector('.input2').value
            const obj={
                username,
                password
            }
            const json = JSON.stringify(obj)
            //创建小黄人
            const xhr = new XMLHttpRequest()
            //设置请求方法和请求URL
            xhr.open('POst','http://hmajax.itheima.net/api/register')
            //设置请求头
            xhr.setRequestHeader('Content-Type', 'application/json');
            //当数据加载完毕,需要执行的操作
            xhr.addEventListener('loadend',function(){
                console.log(xhr.response);
                
            })

            //发送
            xhr.send(json)
        })


    </script>
</body>

</html>